<template>
  <div class="home">
    <div style="margin-top: 10px; display: flex">
      <div>
        指定专业及部门:
        <el-select v-model="model" placeholder="">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <!-- <div style="margin-left: 20px">指定员工代码: 20304</div> -->
    </div>
    <div style="margin-top: 10px">
      选择归档类型
      <el-radio-group v-model="radio" style="margin-left: 10px">
        <el-radio :label="1">文书</el-radio>
        <el-radio :label="2">工程项目</el-radio>
        <el-radio :label="3">图文</el-radio>
      </el-radio-group>
      <div style="margin-top: 20px; padding-left: 116px">
        编号: 2023-01-02-001-01
      </div>
      <div style="margin-top: 10px; padding-left: 116px">
        <div style="margin-bottom: 10px">归档参数:</div>
        <div
          v-for="item in params"
          :key="item.id"
          :style="{
            display: 'flex',
            height: item.value == '标题' ? '80px' : '50px',
            'align-content': 'center',
          }"
        >
          <div
            class="flex-item"
            :style="{ 'line-height': item.value == '标题' ? '80px' : '50px' }"
          >
            {{ item.value }}
          </div>
          <div
            class="flex-item"
            :style="{ 'line-height': item.value == '标题' ? '80px' : '50px' }"
          >
            {{ item.type }}
          </div>
          <div
            style="
              display: flex;
              align-content: center;
              height: 40px;
              line-height: 40px;
              width: 600px;
            "
          >
            <div
              style="color: red"
              :style="{ 'line-height': item.value == '标题' ? '80px' : '50px' }"
            >
              *
            </div>
            <el-input
              v-if="item.value == '标题'"
              v-model="item.content"
              type="textarea"
              maxlength="200"
              resize="none"
              style="margin-left: 10px"
              show-word-limit
              :rows="2"
              placeholder="请输入标题"
              @input="timeEffectInput"
            />
            <el-input
              v-else
              v-model="item.content"
              placeholder=""
              style="margin-left: 10px"
            />
          </div>
        </div>
      </div>
    </div>

    选择附件列表:
    <el-upload
      class="upload-demo"
      drag
      action="https://jsonplaceholder.typicode.com/posts/"
      multiple
      :file-list="fileList"
      style="margin-top: 10px；width:200px"
    >
      <i class="el-icon-upload" />
      <div class="el-upload__text">
        将文件拖到此处，或<em style="font-size: 14px">点击上传</em>
      </div>
    </el-upload>
    <div style="text-align: center">
      <el-button type="primary" style="width: 200px">提 交</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio: 1,
      title: '',
      inputDialog: false,
      params: [
        {
          id: 1,
          value: '标题',
          type: '文本',
          checked: true,
          content: '水库预算',
          default: ''
        },
        {
          id: 2,
          value: '交付部门',
          type: '文本',
          checked: true,
          content: '水库',
          default: ''
        },
        {
          id: 3,
          value: '保存期',
          type: '数字',
          checked: true,
          content: '永久',
          default: '6'
        }
      ],
      model: '',
      options: [],
      fileList: [
        {
          name: '文件1',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        },
        {
          name: '文件2',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }
      ]
    }
  },
  methods: {
    timeEffectInput() {
      const length = this.dialogForm.remark.length // 先拿到当前输入时文本域文字长度
      if (length >= 200) {
        // 当长度超过200
        // 获取文本域计数统计设置字体为红色
        this.$el.querySelector('.el-input__count').style =
          'color:red !important'
        // 防止后续输入溢出截取0-200的字符
        this.dialogForm.remark = this.dialogForm.remark.substr(0, 200)
      } else {
        // 不超过则设置为原字体颜色
        this.$el.querySelector('.el-input__count').style =
          'color:#909399 !important'
      }
    }
  }
}
</script>

<style scoped>
.home {
  margin: 20px;
}
div {
  font-size: 18px;
}
.size {
  justify-content: space-evenly;
}
.flex-item {
  width: 120px;
}
div /deep/ .el-upload-list {
  width: 360px;
}
</style>
